<template>
  <div id="hobby">
    <div class="hobby-word">
      <span class="hobby-word-span1">会员都爱买</span>
      <span class='hobby-word-span2'>
        更多
        <i class="iconfont icon-anniu-jiantouxiangyou"></i>
      </span>
    </div>
    <div class="hobby-word1">全球甄选 卓越品质 口碑立荐</div>
    <div class="hobby-goodslist-container">
      <ul class="hobby-goodslist">
        <li>
          <div class="hobby-goodslist-pic">
            商品图片
          </div>
          <div class="hobby-goodslist-disc">
            商品描述
          </div>
          <div class="hobby-goodslist-price">
            <i class="iconfont icon-qianqian-"></i>32.8
          </div>
        </li>
        <li>
          <div class="hobby-goodslist-pic">
            商品图片
          </div>
          <div class="hobby-goodslist-disc">
            商品描述
          </div>
          <div class="hobby-goodslist-price">
            <i class="iconfont icon-qianqian-"></i>32.8
          </div>
        </li>
        <li>
          <div class="hobby-goodslist-pic">
            商品图片
          </div>
          <div class="hobby-goodslist-disc">
            商品描述
          </div>
          <div class="hobby-goodslist-price">
            <i class="iconfont icon-qianqian-"></i>32.8
          </div>
        </li>
        <li>
          <div class="hobby-goodslist-pic">
            商品图片
          </div>
          <div class="hobby-goodslist-disc">
            商品描述
          </div>
          <div class="hobby-goodslist-price">
            <i class="iconfont icon-qianqian-"></i>32.8
          </div>
        </li>
        <li>
          <div class="hobby-goodslist-pic">
            商品图片
          </div>
          <div class="hobby-goodslist-disc">
            商品描述
          </div>
          <div class="hobby-goodslist-price">
            <i class="iconfont icon-qianqian-"></i>32.8
          </div>
        </li>
        <li>
          <div class="hobby-goodslist-pic">
            商品图片
          </div>
          <div class="hobby-goodslist-disc">
            商品描述
          </div>
          <div class="hobby-goodslist-price">
            <i class="iconfont icon-qianqian-"></i>32.8
          </div>
        </li>
        <li>
          <div class="hobby-goodslist-pic">
            商品图片
          </div>
          <div class="hobby-goodslist-disc">
            商品描述
          </div>
          <div class="hobby-goodslist-price">
            <i class="iconfont icon-qianqian-"></i>32.8
          </div>
        </li>
        <li>
          <div class="hobby-goodslist-pic">
            商品图片
          </div>
          <div class="hobby-goodslist-disc">
            商品描述
          </div>
          <div class="hobby-goodslist-price">
            <i class="iconfont icon-qianqian-"></i>32.8
          </div>
        </li>
        <li>
          <div class="hobby-goodslist-pic">
            商品图片
          </div>
          <div class="hobby-goodslist-disc">
            商品描述
          </div>
          <div class="hobby-goodslist-price">
            <i class="iconfont icon-qianqian-"></i>32.8
          </div>
        </li>  
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MemberHobby',
  components: {

  },
  mixins: [],
  props: {

  },
  data() {
    return {

    }
  }
};
</script>
<style lang='less' scoped>
#hobby {
  height: 16rem;
  width: 32rem;
  background-color: white;
  margin-top: 1rem;
  border-radius: 0.5rem;
  text-align: left;
  padding: 1rem;
  font-weight: normal;
  color: black;

  .hobby-word {
    .hobby-word-span1 {
      color: black;
      font-size: 1.8rem;
    }

    .hobby-word-span2 {
      color: gray;
      margin-left: 15rem;
      font-size: 1.4rem;
      .iconfont{
        font-size: 1.5rem;
      }
    }
  }

  .hobby-word1 {
    color: goldenrod;
    font-size: 1.4rem;
  }

  .hobby-goodslist-container {
    overflow: auto;
    .hobby-goodslist {
      width: 82rem;
      // background-color: red;
      margin-top: 0.5rem;
      display: flex;
      justify-content: space-between;
      overflow: auto;

      li {
        width: 8.5rem;
        height: 11rem;
        // border: 0.2rem gainsboro solid;
        overflow: auto;
        box-shadow:#ccc 0px 0px 1rem ;
        position: relative;
        border-radius: 0.3rem;
        .hobby-goodslist-pic{
          width:8.5rem ;
          height: 8rem;
          background-color: red;
        }
        .hobby-goodslist-disc{
          width: 8.5rem;
          position: absolute;
          bottom: 3rem;
          font-size: 1rem;
          text-align: center;
        }
        .hobby-goodslist-price{
          width: 8.5rem;
          line-height: 2.7rem;
          background-color: rgb(86, 81, 81);
          font-size: 1.5rem;
          text-align: center;
          border-top: 0.2rem gray solid;
          .iconfont{
            font-size: 1.5rem;
          }
        }
      }
    }
  }

}</style>